<template>
  <div class="table-page-search-wrapper">
    <a-form layout="inline">
      <a-row :gutter="48">
        <a-col :md="6" :sm="24">
          <a-form-item :label="$t('all.autotext17')">
            <a-range-picker
              format="YYYY-MM-DD"
              :show-time="false"
              v-decorator="['range-time-picker']"
              :allowClear="true"
              @change="event_changeCreateTime"
              v-model="dateArr"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :md="6" :sm="12">
          <a-space>
            <a-button type="primary" @click="$refs.table.refresh(true)">{{ $t('all.autotext30') }}</a-button>
            <a-button @click="resetQueryParam">{{ $t('all.autotext340') }}</a-button>
          </a-space>
        </a-col>
        <a-col :md="12" :sm="12" align="right">
          <a-space>
            <a-button icon="export" @click="clickExport" v-if="$auth('PROJECT.PROJECT_INCOME_EXPORT_V2')">{{ $t('all.autotext1014') }}</a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-form>
    <s-table
      ref="table"
      size="default"
      :row-key="record => record.id"
      :data="loadData"
    >
      <a-table-column :title="$t('all.autotext496')" key="direct" data-index="direct">
        <template slot-scope="text, record">
          <span v-if="offline === 1">{{ record.direct | enumValueByKey($const.FINANCE_TYPE) }}</span>
          <span v-else>{{ $t('all.autotext1547') }}</span>
        </template>
      </a-table-column>
      <a-table-column :title="$t('all.autotext867')" key="amount" data-index="amount">
        <template slot-scope="text, record" >
          <span>¥{{ record.amount | formatAmount }}</span>
        </template>
      </a-table-column>
      <a-table-column :title="$t('all.autotext1543')" key="serviceAmount" data-index="serviceAmount">
        <template slot-scope="text, record">
          ¥{{ record.serviceAmount | formatAmount }}
        </template>
      </a-table-column>
      <a-table-column
        :title="$t('all.autotext944')"
        v-if="offline==1"
        key="payNo"
        data-index="payNo"
      />
      <a-table-column
        :title="$t('all.autotext722')"
        v-if="offline==1"
        key="createTime"
        data-index="createTime"
      >
        <template slot-scope="text, record">
          {{ record.createTime | moment() }}
        </template>
      </a-table-column>
      <a-table-column :title="$t('all.autotext244')" key="applyTime" data-index="applyTime">
        <template slot-scope="text, record">
          {{ record.applyTime | moment() }}
        </template>
      </a-table-column>
      <a-table-column :title="$t('all.autotext187')" align="center">
        <template slot-scope="record">
          <a @click="clickViewDetail(record)" v-if="$auth('PROJECT.PROJECT_INCOME_DETAIL_V2')">{{ $t('all.autotext568') }}</a>
        </template>
      </a-table-column>
    </s-table>
    <div v-if="offline==1">
      <div class="total-wrap">
        <a-space :size="40">
          <div class="total-space">{{ $t('all.autotext1451') }}:<span><em>¥</em>{{ (amountInfo.total || 0).toFixed(2) }}</span></div>
          <div class="total-space">{{ $t('all.autotext29') }}:<span>{{ amountInfo.pv ? amountInfo.pv.totalCount : 0 }}</span>{{ $t('all.autotext533') }}</div>
        </a-space>
      </div>
      <!-- <div class="total-wrap">
        <div class="total-space">{{ $t('all.autotext1539') }}:<span><em>¥</em>{{ (amountInfo.studyPaid || 0).toFixed(2) }}</span></div>
        <div class="total-space">{{ $t('all.autotext1540') }}<span><em>¥</em>{{ (amountInfo.serviceOnlinePaid || 0).toFixed(2) }}</span></div>
      </div> -->
    </div>
    <div v-if="offline==2">
      <div class="total-wrap">
        <a-space :size="40">
          <div class="total-space">{{ $t('all.autotext1546') }}:<span><em>¥</em>{{ (amountInfo.serviceOffline || 0).toFixed(2) }}</span></div>
          <div class="total-space">{{ $t('all.autotext29') }}:<span>{{ amountInfo.pv ? amountInfo.pv.totalCount : 0 }}</span>{{ $t('all.autotext533') }}</div>
        </a-space>
      </div>
    </div>
  </div>
</template>

<script>
import { getFinanceList } from '@/api/project/finance'
import { buildPaginationObj } from '@/components/Table'
export default {
  props: {
    datailId: {
      type: [Number, String],
      default: 0
    },
    offline: {
      default: '1'
    }
  },
  data () {
    return {
      createTime: [],
      dynamicTitle: this.$t('all.autotext749'),
      dateArr: [],
      queryParam: {},
      loadData: parameter => {
        if (this.$auth('PROJECT.PROJECT_INCOME_LIST_V2')) {
          return getFinanceList(Object.assign(parameter, this.queryParam))
            .then(res => {
              this.amountInfo = res
              return res.pv
            })
            .catch(() => {})
        } else {
          return Promise.resolve(buildPaginationObj([]))
        }
      },
      amountInfo: {}
    }
  },
  created () {
    // this.queryParam.proId = this.$route.query.proId
    this.queryParam.proId = this.datailId
    this.queryParam.offline = this.offline
  },
  methods: {
    // 导出
    clickExport () {
      const parseParams = (url, params) => {
        const paramsArray = []
        Object.keys(params).forEach(key => params[key] && paramsArray.push(`${key}=${params[key]}`))
        if (url.search(/\?/) === -1) {
          url += `?${paramsArray.join('&')}`
        } else {
          url += `&${paramsArray.join('&')}`
        }
        return url
      }
      const baseUrl = '/api'
      const api = '/boss/finance/flowExport'
      const fullUrl = baseUrl + api
      console.log(fullUrl)
      const dealUrl = parseParams(fullUrl, this.queryParam)
      console.log(this.queryParam)
      window.open(dealUrl, '_self')
    },
    // 处理发起日期选择框改变时产生的回调
    event_changeCreateTime (date, dateString) {
      this.queryParam.bTime = dateString[0]
      this.queryParam.eTime = dateString[1]
    },
    // 点击重置按钮清空查询
    resetQueryParam () {
      this.dateArr = []
      this.queryParam = { proId: this.datailId, offline: this.offline }
      this.$refs.table.refresh(true)
    },
    clickViewDetail (record) {
      this.$router.push({ name: 'FinanceDetail', query: { ...record, offline: this.offline } })
    }
  }
}
</script>

<style scoped lang="less">
.total-wrap {
  margin-top: 20px;
  em{
    font-style: normal;
    font-size: 16px;
  }
  .total-space>span {
    font-size: 18px;
    font-weight: bold;
    margin-left: 8px;
     margin-right: 3px;
  }
}
</style>
